.qimenpaipan {
  .margins {
    margin: 0 auto;
    max-width: 1500px;
    padding: 0 80px 30px 80px;

    .navigation {
      height: 40px;
      line-height: 40px;
      margin-top: -10px;
      background-color: #f9f9f9;
    }

    .prediction {
      float: right;
      margin-top: -30px;

      .spacing {
        margin-right: 20px;
      }
    }

    .divider {
      margin: -24px 0 -10px 0;
    }

    .reLoading-button {
      width: 120px;
    }

    /* 十二时辰 */
    .shichen {
      height: 455px;
      background-color: rgb(255, 255, 255, 0);

      .date {}

      .shichen {
        // border-radius: 30px;
        // height: 200px;
        text-align: center;
        margin: 20px -15px 0 0 !important;
        // border: none;

        .title {
          // font-weight: bold;
          margin-left: -2px;
          line-height: 10px;
          font-size: 13px !important;
        }

        .yes {
          height: 35px;
          width: 100px;
          color: white;
          background-color: rgb(0, 160, 255);
          border-radius: 2px;
          transition: .3s;
          border: none !important;
          margin: 15px 15px 10px 0;
        }

        .yes:focus {
          color: white;
          background-color: rgb(0, 170, 255);
        }

        .yes:hover {
          color: white;
          background-color: rgb(0, 170, 255);
          transition: .3s;
        }

        .yes:active {
          color: white;
          background-color: rgb(0, 150, 255);
        }

        .no {
          height: 35px;
          width: 100px;
          color: white;
          background-color: rgb(70, 70, 70);
          border-radius: 2px;
          transition: .3s;
          border: none !important;
          margin: 15px 15px 10px 0;
        }

        .no:focus {
          color: white;
          background-color: rgb(50, 50, 50);
        }

        .no:hover {
          color: white;
          background-color: rgb(90, 90, 90);
          transition: .3s;
        }

        .no:active {
          color: white;
          background-color: rgb(60, 60, 60);
        }
      }
    }

    /* 默认排盘数据 */
    .default {
      height: 455px;
      background-color: rgb(255, 255, 255, 0);

      .jgg {
        // text-align: center;
        margin: 0 0 0 -10px;

        .mark {
          text-align: center;
          // margin-top: -5px;

          .date {
            margin-top: 4px;
          }
        }

        .big {
          margin: 0 auto;
          text-align: center;
          width: 360px;
          height: 360px;
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          grid-template-columns: repeat(3, 1fr);

          >div {
            width: 116px;
            height: 110px;
            line-height: 110px;
            color: #323232;
            margin-top: 10px;
            margin-right: 10px;
            text-align: center;
            border-radius: 5px;
            background-color: rgb(245, 245, 245);
            border: 1px rgba(0, 0, 0, 0.26) solid;
            box-shadow: 2px 2px 5px rgb(235, 235, 235);
          }
        }

        .small {
          color: black;
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          grid-template-columns: repeat(3, 1fr);

          >div {
            width: 37px;
            height: 35px;
            line-height: 35px;
            font-size: 13px;
            border-radius: 9px;

            .core {
              float: left;
              margin-left: 1px;
            }

            .status {
              width: 20px;
              height: 16px;
              line-height: 22px;
              float: right;
              color: #828282;
              font-size: 10px;
              margin-right: 1px;
              border-radius: 10px;
            }

            .yiKong .xunKong {
              margin-left: 1px;
              font-size: 20px;
            }

            .dun {
              width: 39px;
              color: white;
              font-size: 12px;
              border-radius: 5px;
              background-color: rgb(150, 150, 150);
            }
          }

          .marki {
            font-size: 12px;
            font-weight: bold; // 字体加粗
          }

          .qin {
            color: rgb(50, 50, 50);
          }
        }

      }

    }

    /* 选项 */
    .option {
      height: 455px;

      div {
        margin-bottom: 5px;
      }

      .name {
        width: 75%;
        margin-right: 10px;
      }

      .sex {
        width: 20px;
      }

      .occupy {
        width: 75%;
        margin-right: 10px;
      }

      .leap-month {}

      .date {
        margin-top: 20px;

        .date-type {
          float: right;
        }
      }

      .address {
        float: right;

        .city {
          width: auto;
        }
      }

      .paipan-type {
        margin-top: 10px;

        .title {
          float: left;
          margin-top: 5px;
        }

        .select {}

      }

      .qimen-type {
        margin-top: 10px;

        .title {
          float: left;
          margin-top: 5px;
        }

        .select {
          width: 50%;
        }

        .tip {
          margin-left: 10px;
        }

      }

      .paipan-system {
        margin-top: 10px;

        .title {
          float: left;
          margin-top: 5px;
        }

        .select {
          width: 50%;
        }

        .tip {
          margin-left: 10px;
        }
      }

      .res {
        padding-top: 30px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        .resetting {
          float: left;
          cursor: pointer;
          transition: 0.1s;
        }

        .resetting:focus {
          border-radius: 10px;
          color: rgb(10, 10, 10);
        }

        .resetting:hover {
          transition: 0.1s;
          border-radius: 10px;
          color: rgb(100, 100, 100);
        }

        .resetting:active {
          border-radius: 10px;
          color: black;
        }

        .senior {
          float: right;
          cursor: pointer;
          transition: 0.1s;
        }

        .senior:focus {
          border-radius: 10px;
          color: rgb(10, 10, 10);
        }

        .senior:hover {
          transition: 0.1s;
          border-radius: 10px;
          color: rgb(100, 100, 100);
        }

        .senior:active {
          border-radius: 10px;
          color: black;
        }
      }

      .starts {
        width: 100%;
        height: 50px;
        color: rgb(96, 98, 102);
        border: 1px rgb(150, 150, 150) solid;
        // background-color: rgb(30, 30, 30);
        border-radius: 50px;
        font-size: 16px;
        margin-top: 40px;
        background-color: rgb(253, 253, 253);
      }

      .starts:focus {
        color: rgb(96, 98, 102);
        background-color: rgb(249, 249, 249);
      }

      .starts:hover {
        color: rgb(96, 98, 102);
        background-color: rgb(249, 249, 249);
      }

      .starts:active {
        color: rgb(96, 98, 102);
        background-color: rgb(249, 249, 249);
      }

    }

    /* 返回排盘 */
    .return {
      height: 30px;
      line-height: 30px;
      border: 1px rgb(220, 223, 230) solid;
      width: 100%;
      border-radius: 50px;
      text-align: center;
      background-color: rgb(255, 255, 255);
      font-size: 15px;
      cursor: pointer;
      transition: .4s;
      margin: 0 auto 10px;
    }

    .return:hover {
      // text-align: center;
      // margin: 0 auto 10px;
      // width: 10%;
      transition: .4s;
      border: 1px rgb(210, 210, 210) solid;
      background-color: rgb(251, 251, 251);
    }

    /* 九宫格 */
    .jgg {
      height: 500px;
      border-radius: 20px;
      background-color: rgb(255, 255, 255, 0);

      .divider1 {
        margin: -15px 0 -15px 0;
      }

      // 详细模式
      .detailed {
        // text-align: center;
        margin: -10px 0 0 -10px;

        .mark {
          text-align: center;
          // margin-top: -5px;

          .date {
            margin-top: 4px;
          }
        }

        .big {
          cursor: pointer;
          margin: 0 auto;
          text-align: center;
          width: 360px;
          height: 360px;
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          grid-template-columns: repeat(3, 1fr);

          >div {
            width: 116px;
            height: 110px;
            line-height: 110px;
            color: #323232;
            margin-top: 10px;
            margin-right: 10px;
            text-align: center;
            border-radius: 5px;
            background-color: rgb(245, 245, 245);
            border: 1px rgba(0, 0, 0, 0.26) solid;
            box-shadow: 2px 2px 5px rgb(235, 235, 235);
          }
        }

        .small {
          color: black;
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          grid-template-columns: repeat(3, 1fr);
          transition: .3s;

          >div {
            width: 37px;
            height: 35px;
            line-height: 35px;
            font-size: 13px;
            border-radius: 9px;

            .core {
              float: left;
              margin-left: 1px;
            }

            .status {
              width: 20px;
              height: 16px;
              line-height: 22px;
              float: right;
              color: #828282;
              font-size: 10px;
              margin-right: 1px;
              border-radius: 10px;
            }

            .yiKong .xunKong {
              margin-left: 1px;
              font-size: 20px;
            }

            .dun {
              width: 39px;
              color: white;
              font-size: 12px;
              border-radius: 5px;
              background-color: rgb(150, 150, 150);
            }
          }

          .marki {
            font-size: 12px;
            font-weight: bold; // 字体加粗
          }

          .qin {
            color: rgb(50, 50, 50);
          }
        }

        .small:hover {
          transition: 0.3s;
          box-shadow: 0px 1px 5px 3px rgb(220, 220, 220);
        }
      }

      // 精简模式
      .reduce {
        text-align: center;
        margin: -10px 0 0 -10px;

        .big {
          cursor: pointer;
          margin: 0 auto;
          text-align: center;
          width: 360px;
          height: 360px;
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          grid-template-columns: repeat(3, 1fr);

          >div {
            width: 116px;
            height: 110px;
            line-height: 110px;
            color: #323232;
            margin-top: 10px;
            margin-right: 10px;
            text-align: center;
            border-radius: 5px;
            background-color: rgb(247, 247, 247);
            border: 1px rgba(0, 0, 0, 0.26) solid;
            box-shadow: 2px 2px 5px rgb(240, 240, 240);
            cursor: pointer;
          }
        }

        .small {
          color: black;
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          grid-template-columns: repeat(3, 1fr);
          transition: 0.3s;

          >div {
            width: 37px;
            height: 35px;
            line-height: 35px;
            font-size: 13px;
            border-radius: 9px;

            .core {
              text-align: center;
              margin-left: 1px;
            }

            .yiKong {
              line-height: 31px;

              .xunKong {
                margin-left: 1px;
                font-size: 20px;
              }
            }

            .dun {
              width: 39px;
              color: white;
              font-size: 12px;
              border-radius: 5px;
              background-color: rgb(150, 150, 150);
            }
          }

          .marki {
            font-size: 12px;
            font-weight: bold;
          }

          .qin {
            color: #323232;
          }
        }

        .small:hover {
          transition: 0.3s;
          box-shadow: 0px 1px 5px 3px rgb(220, 220, 220);
        }

      }

      // 选项
      .option2 {
        margin: 0 auto;
        text-align: center;
        // width: 90%;
        color: rgb(50, 50, 50);

        .left {
          float: left;
        }

        .right {
          float: right;
        }

        .button {
          // width: 100%;
          height: 25px;
          color: rgb(96, 98, 102);
          border: 1px rgb(150, 150, 150) solid;
          // background-color: rgb(30, 30, 30);
          border-radius: 10px;
          font-size: 12px;
          // margin-top: 30px;
          background-color: rgb(253, 253, 253);
          box-shadow: none;
        }

        button:focus {
          color: rgb(96, 98, 102);
          background-color: rgb(253, 253, 253);
        }

        button:hover {
          color: rgb(96, 98, 102);
          background-color: rgb(245, 245, 245);
        }

        button:active {
          color: rgb(96, 98, 102);
          background-color: rgb(240, 240, 240);
        }

        // 斗转星移模式
        .douzhan {
          margin: 10px 0 0 0;
          text-align: left;
          height: 60px;
          background-color: rgb(255, 255, 255, 0.5);
          border-radius: 20px;
          padding: 0;

          .jianju {
            margin-top: -20px;
          }

          .jianju2 {
            margin-top: -13px;
          }
        }
      }

    }

    /* 基础信息 */
    .foundation {
      height: 500px;
      border-radius: 20px;
      background-color: rgba(255, 255, 255, 0);

      div {
        // line-height: 40px;
      }

      .paipan-mark {
        text-align: center;
        margin: -10px 0 0 0;
        font-weight: bold; // 字体加粗
      }

      .switch {
        // text-align: center;
        // margin: -10px 0 0 0;
        // zoom: 0.9;
      }

      .go1 {
        height: 40px;
        line-height: 40px;
        background-color: rgb(253, 253, 253);
        border-radius: 5px;

        .title {
          float: left;
          margin: 0 15px 0 10px;
          color: rgb(140, 140, 140);
        }
      }

      .go2 {
        height: 40px;
        line-height: 40px;
        background-color: rgb(245, 245, 245);
        border-radius: 5px;

        .title {
          float: left;
          margin: 0 15px 0 10px;
          color: rgb(140, 140, 140);
        }
      }

      .go3 {
        height: 40px;
        line-height: 40px;
        background-color: rgb(245, 245, 245);
        border-radius: 5px;

        .title {
          float: left;
          margin: 0 15px 0 10px;
          color: rgb(140, 140, 140);
        }

        .left {
          float: left;
          width: 50%;
        }

        .right {
          float: right;
          width: 50%;
        }
      }

      .go4 {
        height: 40px;
        line-height: 40px;
        background-color: rgb(253, 253, 253);
        border-radius: 5px;

        .title {
          float: left;
          margin: 0 15px 0 10px;
          color: rgb(140, 140, 140);
        }

        .left {
          float: left;
          width: 50%;
        }

        .right {
          float: right;
          width: 50%;
        }
      }
    }

    // 伏吟、反吟、六仪击邢、奇仪入暮
    .qita {
      margin: 20px 0 0 0;

      .tabs {
        margin-top: -20px;
      }
    }

    // 九宫切换按钮
    .gong-switch {
      height: 53px;
      margin: 20px 0 0 0;
      border-radius: 20px;
      background-color: rgb(254, 254, 254);

      .button {
        margin: -10px 0 10px 0;

        .yes {
          color: white;
          border-radius: 5px;
          margin-right: 20px;
          background-color: rgb(70, 70, 70);
          transition: 0.1s;
          margin-bottom: 10px;
          // width: 65px;
        }

        .yes:focus {
          color: white;
          background-color: rgb(50, 50, 50);
          transition: 0.1s;
        }

        .yes:hover {
          color: white;
          background-color: rgb(60, 60, 60);
          transition: 0.1s;
        }

        .yes:active {
          color: white;
          background-color: rgb(70, 70, 70);
        }

        .no {
          color: black;
          border-radius: 5px;
          margin-right: 20px;
          background-color: white;
          transition: 0.1s;
          margin-bottom: 10px;
          // width: 65px;
        }

        .no:focus {
          color: white;
          background-color: rgb(50, 50, 50);
          transition: 0.1s;
        }

        .no:hover {
          color: white;
          background-color: rgb(100, 100, 100);
          transition: 0.1s;
        }

        .no:active {
          color: white;
          background-color: rgb(50, 50, 50);
        }
      }
    }

    // 单宫数据
    .gong-info {
      margin: 20px 0 0 0;

      .dangong {
        .title {
          font-size: 18px;
          margin: -15px 0 0 0;
        }

        .divider1 {
          margin: -20px 0 -3px 0;
        }

        .divider2 {
          margin: 165px 0 -25px 0;
        }

        .oneGong {
          float: left;
          margin: -10px 20px 0 0;

          .title-0 {
            background-color: rgb(249, 249, 249);
            text-align: center;
            width: 110px;
            height: 26px;
            line-height: 24px;
            margin-top: 5px;
            border: 1px rgba(0, 0, 0, 0.26) solid;
            border-radius: 5px;
          }

          .small {
            background-color: rgb(249, 249, 249);
            color: black;
            display: grid;
            height: 110px;
            width: 110px;
            border: 1px rgba(0, 0, 0, 0.26) solid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            border-radius: 5px;

            >div {
              width: 35px;
              line-height: 35px;
              text-align: center;
              font-size: 13px;

              .dun {
                width: 37px;
                color: white;
                font-size: 12px;
                border-radius: 5px;
                background-color: rgb(150, 150, 150);
              }

              .yiKong {
                cursor: default;
                line-height: 31px;
              }

              .yiKong .xunKong {
                // zoom: 1.5;
                margin-left: 2px;
                font-size: 20px;
              }
            }
          }
        }

        .oneGong1 {
          float: left;
          margin: -10px 20px 0 0;

          .title-1 {
            text-align: center;
            width: 110px;
            margin-top: 5px;
            height: 26px;
            line-height: 24px;
            border: 1px rgba(0, 0, 0, 0.26) solid;
            border-radius: 5px;
            margin-left: 10px;
            background-color: rgb(249, 249, 249);
          }

          .small {
            color: black;
            display: grid;
            height: 110px;
            width: 110px;
            margin-left: 10px;
            border: 1px rgba(0, 0, 0, 0.26) solid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            border-radius: 5px;
            background-color: rgb(249, 249, 249);

            >div {
              width: 35px;
              line-height: 35px;
              text-align: center;
              font-size: 13px;

              .dun {
                width: 37px;
                color: white;
                font-size: 12px;
                border-radius: 5px;
                background-color: rgb(150, 150, 150);
              }

              .yiKong {
                cursor: default;
                line-height: 31px;
              }

              .yiKong .xunKong {
                margin-left: 2px;
                font-size: 20px;
              }
            }
          }
        }

        .yueLing {
          float: left;
          margin: -10px 20px 0 10px;

          .title-2 {
            text-align: center;
            width: 110px;
            margin-top: 5px;
            height: 26px;
            line-height: 24px;
            border: 1px rgba(0, 0, 0, 0.26) solid;
            background-color: rgb(249, 249, 249);
          }

          .small {
            color: black;
            display: grid;
            height: 110px;
            width: 110px;
            border: 1px rgba(0, 0, 0, 0.26) solid;
            background-color: rgb(249, 249, 249);

            >div {
              width: 110px;
              line-height: 35px;
              text-align: center;
              font-size: 13px;
            }
          }
        }

      }
    }

  }

  /* 高级选项弹窗 */
  .senior-dialog {
    border-radius: 26px;
    height: 100px;

    .header-senior {
      font-size: 18px;
      color: rgb(70, 70, 70);
    }

    .senior-card {
      border-radius: 20px;
      margin-bottom: 10px;
      background-color: rgb(253, 253, 253);
    }

    .senior-card div {
      padding-bottom: 3px;
    }

    .senior-card .t-senior {
      text-align: center;
      margin: 0 auto;
      margin: -15px 0 4px 0;
      font-size: 12px;
      color: rgb(150, 150, 150);
    }

    .tip {
      margin-left: 10px;
    }

  }

  /* 四柱转日期弹窗 */
  .sizhu-dialog {
    border-radius: 26px;

    .header-sizhu {
      font-size: 18px;
      color: rgb(70, 70, 70);
    }

    .sizhu-card {
      border-radius: 20px;
    }

    .sizhu-card div {
      padding-bottom: 3px;
    }

    .sizhu-card div .year-input {
      width: 25%;
      margin-bottom: 10px;
    }

    .sizhu-res {
      margin-left: 5px;
      font-size: 13px;
    }

    .sizhu-card .count {
      text-align: center;
      color: #ababab;
      margin: 6px 0 -20px 0;
      font-size: 12px;
    }
  }

  .null {
    color: rgb(100, 100, 100);
  }

}

@media (min-width: 360px) and (max-width: 430px) {
  .dun {
    display: flex;
    
  }
  .qimenpaipan .margins .gong-info .dangong .divider2 {
    margin: 0;
}
  .oneGong,.oneGong1,.yueLing {
    margin: 0 !important;
    width: 0;
    flex: 1;
  }
  .oneGong1 {
    margin-left: -2px !important;
    margin-right: 17px !important;
  }
  .oneGong .small > div,.title-0 > div,.title-1 > div,.title-2 > div {
    width: 32px !important;
  }
  .oneGong1 .small > div {
    width: 28px !important;

  }
  .yueLing .small > div {
    width: 100% !important;
  }
  .oneGong .small,.oneGong1 .small,.yueLing .small,.title-0,.title-1,.title-2 {
    width: 100% !important;
  }
  // .qimenpaipan .margins .gong-info .dangong .oneGong .small {
  //   width: 100%;
  // }
  .timeRange {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    
  }
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    
    width: 100% !important;
}
  .timeRange .date-type {
    margin-top: 8px;
    
  }
  .margins .default .jgg {
    margin: 0;
    
  }
  .el-tag.el-tag--info {
    font-size: 10px;
    margin-bottom: 9px;
  }
  .qimenpaipan .margins .option .starts {
    margin-top: 10px;
  }
  .qimenpaipan .margins .jgg .reduce {
    margin: 0 !important;
  }
  .qimenpaipan .margins .default .jgg .big, .qimenpaipan .margins .jgg .reduce .big {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
}
.qimenpaipan .margins .default .jgg .big > div, .qimenpaipan .margins .jgg .reduce .big > div {
  width: 100%;
  line-height: 110px;
  color: #323232;
  margin-top: 0;
  margin-right: 0;
  text-align: center;
  border-radius: 5px;
  background-color: rgb(245, 245, 245);
  border: 1px rgba(0, 0, 0, 0.26) solid;
  box-shadow: 2px 2px 5px rgb(235, 235, 235);
}
.qimenpaipan .margins .default .jgg .small > div, .qimenpaipan .margins .jgg .reduce .small > div {
  width: 100%;
  height: 100%;
  line-height: 10px;
  font-size: 10px;
  box-sizing: border-box;

  border-radius: 5px;
}
.qimenpaipan .margins .option .name {
  width: 65%;
}
@media (max-width: 576px) {
  .qimenpaipan .margins .shichen {
    height: auto !important;
  }
  .timeRange {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
  }
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    
    width: 100% !important;
}
  
}

}

@media (min-width: 576px) and (max-width: 768px) {

 .qimenpaipan .margins .shichen {
    height: auto !important;
  }
  
}
@media (min-width: 768px) and (max-width: 992px) {

  .qimenpaipan .margins .shichen, .qimenpaipan .margins .jgg {
    height: auto !important;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {

 .qimenpaipan .margins .shichen, .qimenpaipan .margins .jgg {
    height: auto !important;
  }
}
@media (min-width: 1200px) {
  
}